<template>
    <div class="first_level_page my_coupons_page">
        <div class="voucher_box">

            <section class="tab_section">
                <div class="tab" :class="{active: myCouponsFlag=='0'}" @click="toEffective">我的可用提货券</div>
                <div class="tab" :class="{active: myCouponsFlag=='1'}" @click="toInvalid">我的不可用提货券</div>
            </section>

            <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" style="margin-top: -1.62rem;">
                <div v-if="this.flag===0" >
                    <div class="record_box">
                        <ul>
                            <li v-for="voucher in this.canList" v-on:click="toBind(voucher.voucherCode)">
                                <img src="../../images/record_bg.png" alt="">
                                <div v-if="voucher.exchangeFlag===1" class="bottom">有效期至：{{new Date(voucher.endTime).getFullYear()
                                }}/
                                {{parseMonth(new Date(voucher.endTime).getMonth()+1)
                                }}/
                                {{parseDay(new Date(voucher.endTime).getDate())
                                }}&nbsp;
                                {{parseHour(new Date(voucher.endTime).getHours())
                                }}:
                                {{parseMin(new Date(voucher.endTime).getMinutes())
                                }}:
                                {{parsesec(new Date(voucher.endTime).getSeconds())
                                }}
                                </div>
                                <div v-else class="bottom" v-on:click="toBind(voucher.voucherCode)">
                                    激活绑定
                                </div>
                                <div class="dw clear">
                                    <div class="left">
                                        <h2><em>￥</em>{{parseInt(voucher.deductAmount)}}</h2>
                                        <p>{{typeName(voucher.voucherClass)}}</p>
                                    </div>
                                    <div class="right">
                                        <h3 class="truncate">{{voucher.voucherName}}</h3>
                                        <p>{{typeName(voucher.voucherClass)}}</p>
                                        <p>{{brandOrClass(voucher.brandId,voucher.brandName,voucher.classId,voucher.className)}}</p>
                                    </div>
                                </div>
                            </li>

                            <li v-if="empImg===0" class="no_data">
                                <img src="../../images/no_data.png" alt="">
                            </li> 
                        </ul>    
                   </div>
                </div>

                <div v-else-if="this.flag===1" >
                    <div class="record_box" >
                        <ul>
                            <li v-for="voucher in this.noList">
                                <img src="../../images/record_bg.png" alt="">
                                <div class="invalid_icon_bg">
                                    <img v-if="voucher.useState==1" src="../../images/mineOverdue_icon.png">
                                    <img v-else src="../../images/mineUsed_icon.png">
                                </div>
                                <div class="bottom">有效期至：{{new Date(voucher.endTime).getFullYear()
                                }}/
                                {{parseMonth(new Date(voucher.endTime).getMonth()+1)
                                }}/
                                {{parseDay(new Date(voucher.endTime).getDate())
                                }}&nbsp;
                                {{parseHour(new Date(voucher.endTime).getHours())
                                }}:
                                {{parseMin(new Date(voucher.endTime).getMinutes())
                                }}:
                                {{parsesec(new Date(voucher.endTime).getSeconds())
                                }}
                                </div>
                                <div class="dw clear">
                                    <div class="left">
                                        <h2><em>￥</em>{{parseInt(voucher.deductAmount)}}</h2>
                                        <p>{{typeName(voucher.voucherClass)}}</p>
                                    </div>
                                    <div class="right">
                                        <h3 class="truncate">{{voucher.voucherName}}</h3>
                                        <p>{{typeName(voucher.voucherClass)}}</p>
                                        <p>{{brandOrClass(voucher.brandId,voucher.brandName,voucher.classId,voucher.className)}}</p>
                                    </div>
                                </div>
                            </li>

                            <li v-if="empImg==0" class="no_data">
                                <img src="../../images/no_data.png" alt="">
                            </li> 
                        </ul>    
                   </div>
                </div>
            
            </v-scroll>
            <transition name="router-slid" mode="out-in">
                <router-view></router-view>
            </transition> 
        </div>

        <transition name="loading">
            <loading v-if="showLoading"></loading>
        </transition>
    </div>
</template>

<script>
    import Vue from 'vue'
    import headTop from 'src/components/header/head'
    import Scroll from 'src/components/common/pulldown';
    import {mapState} from 'vuex'
    import {getSellerAccountList} from 'src/service/getData'
    import {getMyEnableVoucher,getMyDisEnableVoucherList} from 'src/service/getData'
    import loading from 'src/components/common/loading'
    
    Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
    return moment(value).format(formatString);
    });
    export default {
        data(){
            return{
                pageSize:0,
                pageNo:50,
                base:50,
                loadingText:'加载中...',
                canList:[],//可用本地列表
                noList:[],//不可用本地列表
                token:'',
                canVouchers:[],//可用临时列表
                noVouchers:[],//不可用临时列表
                flag:0,//可用不可用页面显示标记
                flag1:0,//可用不可用下拉刷新标记
                empImg:0,
                myCouponsFlag: 0,
                showLoading: true, //显示加载动画
            }
        },
        mounted(){
         this.token  = this.userInfo.token;
         this.toEffective(this.pageSize,this.pageNo);

        },

        computed:{
             ...mapState([
                'userInfo'
            ]),
             
        },
        components: {
            headTop,
            'v-scroll':Scroll,
            loading,
        },
        methods: {
            init(){
                this.pageSize=0;
                this.pageNo=5;
                this.canList=[];
                this.noList=[];
                this.empImg=0;
                this.$el.querySelector('.load-more').style.display = 'block';
            },
            typeName(voucherType){              
                let thisLenght = voucherType.split(",");              
                if(thisLenght.length!=3) {
                    return '错误类型'
                } if(thisLenght[0]==1) {
                    return '全场通用'
                } else {
                    return '指定仓库'
                }
            },
             parseInt(num){
                var nums = num.split(".");
                if(nums.length==2)
                {
                    return nums[0]
                }else
                {
                    return num;
                }
             
            },
            parseMonth(num){
               
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },
            parseDay(num){
               
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },
            parseHour(num){
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },
            parseMin(num){
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },
            parsesec(num){
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },

            brandOrClass(brandId,brandName,classId,className){              
                  
                if(brandId==0&&classId==0)
                {
                    return '';
                }
                else if(brandId==0&&classId!=0)
                {
                     return ""+className;
                }
                else if(brandId!=0&&classId==0)
                {
                     return ""+brandName;
                }
                else if(brandId!=0&&classId!=0)
                {
                     return ""+brandName+"--"+className;
                }
                
            },
            async toEffective(){
                this.myCouponsFlag = 0;
                if(this.flag1==1){ return;}
                this.init();
                this.flag=0;
                this.flag1=1;
                this.noList=[];
                this.empImg=1;  // 0.已使用 1.已过期

                if (this.userInfo && this.userInfo.uid) {
                 
                    let data = await getMyEnableVoucher(this.token,this.pageSize,this.pageNo);
                    this.canVouchers = data.data;
                     if(this.canVouchers.length!=0)
                    {
                        this.empImg=1;
                    }
                    else
                    {
                        this.empImg=0;
                    }
                 
                    this.canList = this.canList.concat(this.canVouchers);
                   
                    if(this.canVouchers.length<this.pageNo)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                    }
                    this.canVouchers=[];

                }
                this.showLoading = false;
            },
           async toInvalid(){
                this.myCouponsFlag = 1;
                if(this.flag1==2){ return;}
                    this.init();
                    this.flag=1;
                    this.flag1=2;
                    this.empImg=1;
                    this.canList=[];
                    this.noList=[];

                if (this.userInfo && this.userInfo.uid) {
               
                    let tar = await getMyDisEnableVoucherList(this.token,this.pageSize,this.pageNo);
                  
                    this.noVouchers = tar.data;
                 
                    if(this.noVouchers.length!=0)
                    {
                        this.empImg=1;
                    }
                    else
                    {
                        this.empImg=0;
                    }
                    this.noList = this.canList.concat(this.noVouchers);
                    if(this.noVouchers.length<this.pageNo)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                    }
                    this.noVouchers=[]; 
                }
            },
           toBind(voucherCode){
             
                this.$router.push({path:'/voucherDetail', query:{voucherCode:voucherCode,index:1}});
           },
          
           async  onRefresh(done) {
                this.loadingText='加载中……';
                if(this.flag==0)
                {     
                    this.init();
                    let data = await getMyEnableVoucher(this.token,this.pageSize,this.pageNo);
                    this.canVouchers = data.data;
                    if(this.canVouchers.length!=0)
                    {
                        this.empImg=1;
                    }
                    else
                    {
                        this.empImg=0;
                    }
                 
                    this.canList = this.canList.concat(this.canVouchers);
                
                    if(this.canVouchers.length<this.pageNo)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                    }
                    this.canVouchers=[];
                }
                else
                {
                    this.init();
                    let tar = await getMyDisEnableVoucherList(this.token,this.pageSize,this.pageNo);
                  
                    this.noVouchers = tar.data;
                     if(this.noVouchers.length!=0)
                    {
                        this.empImg=1;
                    }
                    else
                    {
                        this.empImg=0;
                    }
                    this.noList = this.canList.concat(this.noVouchers);
                    if(this.noVouchers.length<this.pageNo)
                    {
                    this.$el.querySelector('.load-more').style.display = 'none';
                    }
                    this.noVouchers=[];                          
                } 
                done() // call done
            },
            //上拉加载，
           async onInfinite(done){
            
                if(this.flag==0)
                {
                    if (this.canList.length!==0)
                    {              
                        this.pageSize = this.canList.length+1;
                        this.pageNo = this.pageSize+this.base-1;
                    }
                    let data = await getMyEnableVoucher(this.token,this.pageSize,this.pageNo);
                    this.canVouchers = data.data;

                    this.canList = this.canList.concat(this.canVouchers);

                    if(this.canVouchers.length<this.base)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                    }
                    this.canVouchers=[];
                 }else{
                   
                    if (this.noList.length!==0) 
                    {              
                        this.pageSize = this.noList.length+1;
                        this.pageNo = this.pageSize+this.pageNo-1;
                    }
                    let data = await getMyDisEnableVoucherList(this.token,this.pageSize,this.pageNo);
                    this.noVouchers = data.data;

                    this.noList = this.noList.concat(this.noVouchers);

                    if(this.noVouchers.length<this.base)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                    }
                    this.noVouchers=[];
                 }
            
                done() // call done
            }

        },
       

    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin'; 
    .tab_section{
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.28rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $orange;
            border-bottom: .04rem solid $orange;
        }
    }
    .invalid_icon_bg{
        position: absolute;
        top: 1.1rem;
        right: .2rem;
        @include wh(1.3rem, 1.3rem);
    }

span , em , i{font-style:normal;}
.voucher_box .top{text-align: center;padding-top:.56rem;padding-bottom:.56rem;}
.voucher_box .top .images{padding-bottom:.46rem;}
.voucher_box .top img{width:1.3rem;height:1.3rem;}
.voucher_box .text{text-align: center;font-size:.34rem;color:#333;}
.voucher_box .text2{text-align: center;font-size:.28rem;color:#666;margin-top:.3rem;}
.voucher_box .text2 em{color:#ee7859;margin-left:.26rem;}
.voucher_box .btn{width:2.22rem;margin:0 auto;margin-top:.26rem; line-height:.64rem;border-radius:10rem;border:.02rem solid #eee;color:#666;font-size:.26rem;}
.voucher_box .btn:active{background:#f5f5f5;}
.record_box{padding:.22rem .14rem 0 .14rem;}
.record_box ul li{border-radius:.05rem;position:relative;margin-bottom:.22rem;}
.record_box img{width:100%;}
.record_box ul li .dw{position:absolute;width:100%;height:100%;top:0;left:0;font-size:.24rem;}
.record_box ul li .dw .left{width:2rem;text-align: center;margin-top:.5rem;}
.record_box ul li .dw .left h2{font-size:.6rem;color:#ffa101;}
.record_box ul li .dw .left h2 em{font-size:.4rem;}
.record_box ul li .dw .left p{margin-top:.24rem;color:#ffa101;}
.record_box ul li .dw .right{
    -webkit-width:calc(100% - 2.8rem);
    -moz-width:calc(100% - 2.8rem);
    -o-width:calc(100% - 2.8rem);
    width:calc(100% - 2.8rem);
    position:absolute;
    right:.2rem;
    top:.48rem;
    height:50%;
}
.record_box ul li .dw .right h2{font-size:.28rem;color:#333;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.no_data{text-align: center; margin-top: 3rem;}
.no_data img{width:1.88rem; height:2.6rem;}
.truncate{word-wrap:normal;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.record_box ul li .dw .right h3{font-size:.28rem;color:#333;}
.record_box ul li .dw .right p{font-size:.24rem;color:#999;margin-top:.16rem;}
.record_box ul li .bottom{position:absolute;bottom:0;left:0;width:100%; background:#fbfbfb;line-height:.5rem;font-size:.22rem;color:#ee7859;padding:0 .16rem;border-radius:0 0 .08rem .08rem;text-align:right;}
</style>
